import React from 'react';
import {Link} from 'react-router-dom'
import home from '../../assets/css/home/home.module.css'
import Carousel from 'antd-mobile/lib/carousel'
import 'antd-mobile/lib/carousel/style/css'

export default class HomeIndex extends React.Component{
    constructor(){
        super();
        this.state={
            imgList:[1,2,3],
            iconList:[],
            txtList:[],
            txtOneList:[],
            color:'',
            show:false
        }
    }
    componentWillMount() {
        if (localStorage.isLogin){
            this.setState({show:true});
        } else {
            this.setState({show:false});
        }
        this.getData();
        window.addEventListener('scroll',this.handScroll);
    }
    componentWillUnmount() {
        window.removeEventListener('scroll',this.handScroll);
    }

    getData(){
        fetch('http://vueshop.glbuys.com/api/home/index/slide?token=1ec949a15fb709370f')
            .then((res)=>{
                return res.json()
            }).then(res=>{
                if (res.code === 200) {
                    this.setState({imgList:res.data})
                }
        });
        fetch('http://vueshop.glbuys.com/api/home/index/nav?token=1ec949a15fb709370f')
            .then((res)=>{
                return res.json()
            }).then(res=>{
            if (res.code === 200) {
                this.setState({iconList:res.data});
            }
        });
        fetch('http://vueshop.glbuys.com/api/home/index/goodsLevel?token=1ec949a15fb709370f')
            .then((res)=>{
                return res.json()
            }).then(res=>{
            if (res.code === 200) {
                this.setState({txtOneList:res.data})
            }
        });
        fetch('http://vueshop.glbuys.com/api/home/index/recom?token=1ec949a15fb709370f')
            .then((res)=>{
                return res.json()
            }).then(res=>{
            if (res.code === 200) {
                this.setState({txtList:res.data},()=>{
                    // console.log(res)
                })
            }
        })
    }
    handScroll=(event)=>{
        let scrollTop = document.documentElement.scrollTop;
        if (scrollTop > 150){
            this.setState({color:"linear-gradient(#eb1625,hsla(0,0%,100%,0))"});
            // console.log(2)
        } else {
            this.setState({color:"transparent"});
            // console.log(1)
        }
    };

    render() {
        return(
            <div className={home.boxHome}>
                <nav style={{background:this.state.color}}>
                    <Link to="/goods/classify/?id=492"><img src={require('../../assets/images/common/class.png')} alt='' /></Link>
                    <div>
                        <Link to="/common/search">
                            <img src={require('../../assets/images/common/search.png')} alt=''/>
                            请输入宝贝名称
                        </Link>
                    </div>
                    <p className={!this.state.show? home.show:home.hide}><Link to="/login/login" style={{color:'white'}}>登录</Link></p>
                    <p className={this.state.show? home.show:home.hide}><img src={require('../../assets/images/home/index/my.png')} alt=''/></p>
                </nav>
                <Carousel autoplay={true} infinite>
                    {this.state.imgList.map((item,index)=>{
                        return(
                            <p key={index} className={home.wings}>
                                <img src={item.image} alt=''onLoad={()=>{
                                    this.setState({imgHeight:'auto'})
                                }}/>
                            </p>
                        )
                    })}
                </Carousel>
                <ul className={home.boxUl}>
                    {this.state.iconList.map((item,index)=>{
                        return(
                            <li key={index}>
                                <Link style={{color:'black'}} to={"/goods/classify?id="+item.cid}>
                                    <img src={item.image} alt=''/>
                                    <p>{item.title}</p>
                                </Link>
                            </li>
                        )
                    })}
                </ul>
                <div className={home.boxDiv}>
                    {this.state.txtOneList.map((item,index)=>{
                        return(
                            <div key={index} className={home.active}>
                                <h3>{item.title}</h3>
                                {item.items.map((Item,Index)=>{
                                    return(
                                        <div key={Index}>
                                            <Link style={{color:'black'}} to={"/goods/details/item?gid="+Item.gid}>
                                                <p>{Item.title}</p>
                                                <img src={Item.image} alt=''/>
                                                <p>￥{Item.price}</p>
                                            </Link>
                                        </div>
                                    )
                                })}
                            </div>
                        )
                    })}
                </div>
                <ul className={home.boxUlOne}>
                    <h3>
                        <img src={require('../../assets/images/home/index/recom.png')} alt=''/>
                        为您推荐
                    </h3>
                    {this.state.txtList.map((item,index)=>{
                        return(
                            <Link key={index} style={{color:'black'}} to={"/goods/details/item?gid="+item.gid}>
                                <li>
                                    <p style={{textAlign:'center'}}><img src={item.image} alt=''/></p>
                                    <p>{item.title}</p>
                                    <span>￥{item.price}</span>
                                </li>
                            </Link>
                        )
                    })}
                </ul>
            </div>
        )
    }
}